<template>
  <div>
    <template>
      <el-table
        ref="multipleTable"
        :data="dataSource"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="ID" width="" prop="id1">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="NAME" label="姓名" width=""> </el-table-column>
        <el-table-column label="性别" width=""> 
           <template slot-scope="scope">
             <!-- {{scope.row.sex}} -->
            <span
              >{{scope.row.sex==='M'?'男':scope.row.sex==='F'?'女':''}}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" width="">
        </el-table-column>
        <el-table-column prop="hospital" label="所属医院" width="160">
        </el-table-column>
        <el-table-column prop="date" label="诊断日期" width="">
        </el-table-column>
        <el-table-column prop="part" label="诊断部位"> </el-table-column>
        <el-table-column prop="part" label="检查信息" width="220">
        </el-table-column>
        <el-table-column prop="state" label="接单状态">
          <template slot-scope="scope">
            <span
              >{{scope.row.state===0?'未接单':scope.row.state===1?'已接单':'已完成'}}</span
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="getbill(scope.row)"
              type="success"
              size="small"
            >
              接单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "dataTables",
  data () {
    return {
      currentPage4: 4,
      dataSource: [],
      multipleSelection: [],
      total: 0
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      this.$request
        .getList({
          pageSize: 20,
          pageNum: 1
        })
        .then((res) => {
          this.dataSource = res.rows
          this.total = res.total
        })
        .catch((err) => {
          console.log("error", err)
          this.$message.success("登录失败" + err)
        })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    getbill (data) {
      console.log(data)
        this.$request
        .getReciving({
       id:data.id2
        })
        .then((res) => {
      
        })
        .catch((err) => {
          console.log("error", err)
          this.$message.success("登录失败" + err)
        })
      this.$router.push({path: "/order", query: {id: data.id2}})
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 25px 0 20px;
  font-weight: 400;
  color: #1f2f3d;
  font-size: 22px;
}
p {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}
</style>
